انواع پیشرفته TypeScript: تسلط بر انواع Template Literal و Conditional

مثال بین‌المللی: مدیریت فرمت‌های مختلف تاریخ

مناطق مختلف جهان از فرمت‌های تاریخ متفاوتی استفاده می‌کنند. می‌توانید از انواع شرطی برای مدیریت این تفاوت‌ها استفاده کنید.

type DateFormat = "YYYY-MM-DD" | "MM/DD/YYYY" | "DD.MM.YYYY";

type ParseDate = T extends "YYYY-MM-DD"
  ? { year: number; month: number; day: number; format: "YYYY-MM-DD" }
  : T extends "MM/DD/YYYY"
  ? { month: number; day: number; year: number; format: "MM/DD/YYYY" }
  : T extends "DD.MM.YYYY"
  ? { day: number; month: number; year: number; format: "DD.MM.YYYY" }
  : never;


function parseDate(dateString: string, format: T): ParseDate {
  // (پیاده‌سازی فرمت‌های مختلف تاریخ را مدیریت می‌کند)
  if (format === "YYYY-MM-DD") {
    const [year, month, day] = dateString.split("-").map(Number);
    return { year, month, day, format } as ParseDate;
  } else if (format === "MM/DD/YYYY") {
    const [month, day, year] = dateString.split("/").map(Number);
    return { month, day, year, format } as ParseDate;
  } else if (format === "DD.MM.YYYY") {
    const [day, month, year] = dateString.split(".").map(Number);
    return { day, month, year, format } as ParseDate;
  } else {
    throw new Error("Invalid date format");
  }
}

const parsedDateISO = parseDate("2023-10-27", "YYYY-MM-DD"); // Type: { year: number; month: number; day: number; format: "YYYY-MM-DD"; }
const parsedDateUS = parseDate("10/27/2023", "MM/DD/YYYY"); // Type: { month: number; day: number; year: number; format: "MM/DD/YYYY"; }
const parsedDateEU = parseDate("27.10.2023", "DD.MM.YYYY"); // Type: { day: number; month: number; year: number; format: "DD.MM.YYYY"; }


console.log(parsedDateISO.year); // به سال دسترسی پیدا می‌کنیم با علم به اینکه وجود خواهد داشت

این مثال از انواع شرطی برای تعریف توابع تجزیه تاریخ مختلف بر اساس فرمت تاریخ مشخص شده استفاده می‌کند. نوع ParseDate تضمین می‌کند که شیء بازگشتی دارای خصوصیات صحیح بر اساس فرمت باشد.

ترکیب انواع Template Literal و Conditional

قدرت واقعی زمانی آشکار می‌شود که شما انواع template literal و conditional را با هم ترکیب کنید. این امکان دستکاری‌های نوع فوق‌العاده قدرتمندی را فراهم می‌کند.

type EventName = `on${Capitalize}`;

type ExtractEventPayload = T extends EventName
  ? { type: T; payload: any }  // برای نمایش ساده‌سازی شده است
  : never;


type ClickEvent = EventName<"click">;  // "onClick"
type MouseOverEvent = EventName<"mouseOver">;  // "onMouseOver"


//مثال تابعی که یک نوع می‌گیرد
function processEvent(event: T): ExtractEventPayload {
    //در یک پیاده‌سازی واقعی، ما واقعاً رویداد را ارسال می‌کنیم.
    console.log(`Processing event ${event}`);

    //در یک پیاده‌سازی واقعی، payload بر اساس نوع رویداد خواهد بود.
    return { type: event, payload: {} } as ExtractEventPayload;
}

//توجه داشته باشید که انواع بازگشتی بسیار خاص هستند:
const clickEvent = processEvent("onClick");  //  { type: "onClick"; payload: any; }
const mouseOverEvent = processEvent("onMouseOver"); //  { type: "onMouseOver"; payload: any; }

//اگر از رشته‌های دیگر استفاده کنید، never دریافت می‌کنید:
// const someOtherEvent = processEvent("someOtherEvent"); // نوع `never` است

بهترین شیوه‌ها و ملاحظات

• ساده نگه دارید: در حالی که این انواع پیشرفته قدرتمند هستند، می‌توانند به سرعت پیچیده شوند. برای وضوح و قابلیت نگهداری تلاش کنید.
• به طور کامل تست کنید: با نوشتن تست‌های واحد جامع، اطمینان حاصل کنید که تعاریف نوع شما همانطور که انتظار می‌رود رفتار می‌کنند.
• کد خود را مستند کنید: هدف و رفتار انواع پیشرفته خود را به وضوح مستند کنید تا خوانایی کد را بهبود بخشید.
• عملکرد را در نظر بگیرید: استفاده بیش از حد از انواع پیشرفته می‌تواند بر زمان کامپایل تأثیر بگذارد. کد خود را پروفایل کرده و در صورت لزوم بهینه‌سازی کنید.